<!-- 图片选择 -->
<template>
  <div class="select-img-box" :style="{ 'min-width': `${isFold ? 0 : 156}px`, width: `${isFold ? 0 : 156}px` }">
    <div class="img-num">{{ currentIndex + 1 }}/{{ taskProgressData.totalCount }}</div>
    <recycle-scroller
      ref="imgListRef"
      class="img-list my-scrollbar"
      :items="imgList"
      :item-size="fileItemHeight"
      key-field="id"
      v-slot="{ item, index }"
      emit-update
      @update="scrollerUpdate"
    >
      <div class="img-li" @click="onClick(index)">
        <div class="img-box" :class="[currentMarkImgIndex == index && 'img-box--active']">
          <img v-if="item.pathUrl" :src="customImgUrl(item.pathUrl, 133, 97)" />
          <template v-if="item.markType === 1">
            <img src="@/assets/img/dmp/marked.svg" class="no-mark-icon" />
            <div class="mask"></div>
          </template>
        </div>
        <div class="img-name">
          <a-tooltip :mouse-enter-delay="0.3">
            <template #title> {{ item.fileName }} </template>
            {{ item.fileName }}
          </a-tooltip>
        </div>
      </div>
    </recycle-scroller>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'

  import { customImgUrl } from '@/utils'

  import { TaskDataLi } from '../types'

  export interface Props {
    taskProgressData: any
    imgList: TaskDataLi[]
    currentMarkImgIndex: number
  }
  withDefaults(defineProps<Props>(), {})
  const emits = defineEmits(['clickImg', 'toggleLeftImgColl', 'scroll'])
  /* 虚拟列表滚动逻辑 -------------------------------------------------------------------------------------------------------------------------*/
  const imgListRef = ref<any>()
  const fileItemHeight /* 元素单个高度 = 图片高度 + 字体行高 + 下边距 */ = 97 + 20 + 8
  const currentIndex = ref(0)

  const onClick = (index: number) => {
    emits('clickImg', index)
    calcCurrentTop(index)
  }

  const startIndex = ref(0) //当前显示的第一个图片的索引
  const endIndex = ref(0) //当前显示的最后一个图片的索引

  // 计算当前index的高度
  const calcCurrentTop = (index: number) => {
    const scrollerHeight = imgListRef.value.$el.offsetHeight //外层父元素的高
    const scrollTop = imgListRef.value.$el.scrollTop //滑动距离
    //计算当前列表完整显示的元素的index
    const minIndex = Math.ceil(scrollTop / fileItemHeight)
    const maxIndex = Math.floor((scrollTop + scrollerHeight) / fileItemHeight) - 1

    //如果当前index不在显示范围内，则滚动到当前index
    if (index < minIndex) {
      scrollToIndex(index)
    } else if (index > maxIndex) {
      scrollToIndex(index - (maxIndex - minIndex))
    }

    currentIndex.value = index
  }

  const scrollToIndex = (index: number) => {
    imgListRef.value.$el.scrollTo({
      top: index * fileItemHeight,
      behavior: 'smooth'
    })
  }

  const scrollerUpdate = (_startIndex: number, _endIndex: number) => {
    startIndex.value = _startIndex
    endIndex.value = _endIndex
    emits('scroll')
  }

  /* 展开收起逻辑 -------------------------------------------------------------------------------------------------------------------------*/
  const isFold = ref(false) //是否折叠
  // eslint-disable-next-line
  const toggleLeftImgColl = () => {
    isFold.value = !isFold.value
    emits('toggleLeftImgColl', isFold.value)
  }

  /*  -------------------------------------------------------------------------------------------------------------------------*/

  defineExpose({
    selectIndex: calcCurrentTop,
    startIndex,
    endIndex
  })
</script>

<style lang="less" scoped>
  .select-img-box {
    position: relative;
    height: 100%;
    border-right: 1px solid #d9d9db;
    box-sizing: border-box;

    .coll-btn {
      position: absolute;
      top: 50%;
      left: 100%;
      z-index: 100;
      transform: translateY(-50%);
    }

    .img-num {
      height: 36px;
      font-size: 12px;
      text-align: center;
      color: rgba(25, 25, 48, 0.75);
      line-height: 36px;
      font-weight: 400;
    }

    .img-list {
      overflow-y: auto;
      padding: 0 8px;
      height: calc(100% - 36px);

      .img-li {
        position: relative;
        margin: 0 auto;
        margin-bottom: 8px;
        width: 100%;
        height: 117px;
        box-sizing: border-box;

        .img-box {
          position: relative;
          width: 100%;
          height: 97px;
          object-fit: cover;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          .no-mark-icon {
            position: absolute;
            top: 4px;
            left: 4px;
            width: 20px;
            height: 20px;
          }

          .mask {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
            width: 100%;
            height: 100%;
            background-color: rgba(25, 25, 48, 0.2);
          }

          &:hover,
          &--active {
            &::after {
              position: absolute;
              top: 0;
              left: 0;
              display: block;
              width: 100%;
              height: 100%;
              box-sizing: border-box;
              border: 3px solid #4154d1;
              content: '';
            }
          }
        }

        .img-name {
          width: 133px;
          .elliptical-1();
          .font12();

          text-align: center;
        }
      }
    }
  }
</style>
